<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tree</title>
	<link rel="stylesheet" href="./ztree/css/zTreeStyle/zTreeStyle.css">
	<link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" href="./contextmenu/jquery.contextMenu.css">

	<script type="text/javascript" src="./jquery/dist/jquery.js"></script>

	<script type="text/javascript" src="./bootstrap/dist/js/bootstrap.js"></script>

	<script type="text/javascript" src="./contextmenu/jquery.contextMenu.js"></script>
	<script type="text/javascript" src="./contextmenu/jquery.ui.position.js"></script>

	<script type="text/javascript" src="./ztree/js/jquery.ztree.all.js"></script>

	<script type="text/javascript" src="./ex-tree.js"></script>

	<script type="text/javascript">
		var nodes =[
			{id:1, pId:0, name:"金龙", open:true, nodeType: 'org', iconSkin :'org'},
			{id:101, pId:1, name:"VIN1000001", nodeType: 'device', iconSkin: 'online'},
			{id:102, pId:1, name:"VIN1000002", nodeType: 'device', iconSkin: 'offline'},
			{id:103, pId:1, name:"VIN1000003", nodeType: 'device', iconSkin: 'offline'},
			{id:104, pId:1, name:"VIN1000004", nodeType: 'device', iconSkin: 'stop_online'},
			{id:105, pId:1, name:"VIN1000005", nodeType: 'device', iconSkin: 'online'},
			{id:106, pId:1, name:"VIN1000006", nodeType: 'device', iconSkin: 'online'},
			{id:107, pId:1, name:"VIN1000007", nodeType: 'device', iconSkin: 'stop_online'},
			{id:115, pId:1, name:"VIN1000008", nodeType: 'device', iconSkin: 'online'},

			

			{id:5, pId:0, name:"陕汽", open:false, nodeType: 'org', iconSkin :'org'},
			{id:501, pId:5, name:"VIN2000001", nodeType: 'device', iconSkin: 'offline'},
			{id:502, pId:5, name:"VIN2000002", nodeType: 'device', iconSkin: 'online'},
			{id:503, pId:5, name:"VIN2000003", nodeType: 'device', iconSkin: 'stop_online'},

			{id:6, pId:0, name:"北奔", open:false, nodeType: 'org', iconSkin :'org'},
			{id:601, pId:6, name:"VIN3000001", nodeType: 'device', iconSkin: 'offline'},
			{id:602, pId:6, name:"VIN3000002", nodeType: 'device', iconSkin: 'online'},
			{id:603, pId:6, name:"VIN3000003", nodeType: 'device', iconSkin: 'stop_online'}
	];


	$(window).ready(function() {

		// 实例化Tree对象
		var tree = new Tree({
				// ID, 目标html元素ID
				id: 'tree', 
				// 节点集合
				nodes: nodes, 
				// 节点check配置
				_nodeCheckConfig: { 
					// 禁止多选
					allowMulti: false
				},
			});

		// 初始化
		tree.init();
		
		// 注册check事件
		tree.registerEvent(Tree._EVENT_NAME.onCheck, function(e, treeId, treeNode) {
			var ids = '';
			var text = '';
			if(tree._nodeCheckConfig.allowMulti) {
				// 多选时，获取所有选中节点
				var nodes = tree.getNodesByChecked(true);
				// 过滤type == org的节点
				nodes = tree.filterNodesByNodeType(nodes, Tree._NODE_TYPE.ORG);
				for(var i=0; i<nodes.length; i++) {
					if(ids != '') {
						ids += ',';
					}
					ids += nodes[i].id;
					if(text != '') {
						text += ',';
					}	
					text += nodes[i].name;
				}
				
			} else if(treeNode.checked) {
				ids = treeNode.id;
				text = treeNode.name;
				
			}

			$('#tar').val(text);	
			$('#ids').val(ids);	

			console.log('触发onCheck事件.');
			return true;
		});

		
		tree.registerEvent(Tree._EVENT_NAME.onClick, function(e, treeId, treeNode) {
			
			$('#rs').html('触发onClick事件.' + JSON.stringify(treeNode));
			return true;
		});

		$('#multi').click(function() {
			var config = {
				allowMulti: false
			};
			var ck = $(this).prop('checked');
			if(ck) {
				config.allowMulti = true;
			} else {
				config.allowMulti = false;
			}
			tree.setNodeCheckConfig(config);	
			
		});

		$('#over').click(function() {
			var ck = $(this).prop('checked');
			if(ck) {
				tree.setMouseoverConfig({showModal: true});
			} else {
				tree.setMouseoverConfig({showModal: false});	
			}
			
		});

		$('#right').click(function() {
			var ck = $(this).prop('checked');
			if(ck) {
				tree.setNodeClickConfig({showRightMenu: true});	
			} else {
				tree.setNodeClickConfig({showRightMenu: false});
			}
			
		});

		
	});
	</script>
	<style type="text/css">
		section {
			margin: 10px;
		}
	</style>
</head>
<body>
	<section>
		<div class="row">
			<div class="col-md-2">
				<div id="tree" class="ztree"></div>
			</div>
			<div class="col-md-9">
				<label class="checkbox">Text: </label>
				<input id='tar' type="text"  class="form-control" value=""/>

				<label class="checkbox">Id: </label>
				<input id='ids' type="text"  class="form-control" value=""/>
			</div>
			<div class="col-md-9">
				  <label class="checkbox-inline">
				    <input type="checkbox" id="multi" value="0">允许多选
				  </label>
				  <label class="checkbox-inline">
				    <input type="checkbox" id="right" value="0">右键菜单
				  </label>
				  <label class="checkbox-inline">
				    <input type="checkbox" id="over" value="0">滑过弹窗
				  </label>
				  
			</div>
			<div class="col-md-9" style="margin-top:20px; font-size: 12px;color: red;">
				<!-- 说明：请打开浏览器调试窗口，观察控制台输出 -->
				<textarea name="" id="rs" cols="100" rows="10"></textarea>
			</div>
		</div>
	</section>
</body>
</html>